<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <div v-if="docContent" v-html="docContent"></div>
  </div>
</template>

<script>
import { render } from '@vue-office/docx'
import { Document, Packer, Paragraph } from 'docx'

export default {
  data() {
    return {
      docContent: null
    }
  },
  methods: {
    // 文件上传解析
    handleFileUpload(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = async (e) => {
        const arrayBuffer = e.target.result
        // 使用 docx.js 原生解析
        const doc = new Document(arrayBuffer)
        // 或使用 @vue-office/docx 渲染为 HTML
        this.docContent = await render(arrayBuffer)
      }
      reader.readAsArrayBuffer(file)
    },
    
    // 动态生成并导出 Word 文档
    generateDocx() {
      const doc = new Document({
        sections: [{
          children: [
            new Paragraph("Vue 生成的标题"),
            new Paragraph({ text: "带样式的段落", bold: true })
          ]
        }]
      })
      Packer.toBlob(doc).then(blob => {
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = 'generated.docx'
        link.click()
      })
    }
  }
}
</script>